<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表格用来表示格式化的数据 -->
		<table>
			<!-- 可将 表格分为三部分-->
			<thead>
				<tr>
					<!-- th头部单元格 -->
					<th>日期</th>
					<th>收入</th>
					<th>支出</th>
					<th>合计</th>
				</tr>
			</thead>
			<!-- 如果表格中没有使用tbody，浏览器会自动创建一个tbody，并将tr全部放入tbody -->
			<tbody>
				<!-- 在table中使用tr表示行，td表示列 -->
				<tr>
					<!-- 纵向合并单元格 -->
					<td rowspan="4">2021.1.1</td>
					<td>500</td>
					<td>200</td>
					<td>300</td>
				</tr>
				<tr>
					<td>500</td>
					<td>200</td>
					<td>300</td>
				</tr>
				<tr>
					<td>500</td>
					<td>200</td>
					<td>300</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<!-- 横向合并单元格 -->
					<td colspan="3">合计</td>
					<td>900</td>
				</tr>
			</tfoot>
		</table>
		<!-- 用表格方式垂直水平居中 -->
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>
<style type="text/css">
	table{
		width: 50%;
		border: 1px solid;
		text-align: center;
		margin: 0 auto;
		/* 边块之间的距离 */
		/* border-spacing: 0; */
		/* 合并边块 */
		border-collapse: collapse;
		
	}
	/* td,th在在默认情况下垂直居中 */
	td,th{
		border: 1px solid;
		height: 30px;
	}
	.box1{
		width: 200px;
		height: 200px;
		background-color: #BD2C00;
		/* 将元素设置为单元格 */
		display: table-cell;
		vertical-align: middle;
	}
	.box2{
		width: 100px;
		height: 100px;
		background-color: #00FFFF;
		margin: 0 auto;
	}
</style>